feat: New developer page #1

TamaraZoric · 2024-08-20T14:11:45Z

Description of Problem

The Vue site needs to expand by introducing a "Developers" section to showcase certified developers, allowing users to contact and hire them through a partner. However, the current structure only accommodates "Partners," and there isn’t a clear way to incorporate this new section without complicating the navigation and potentially disrupting the site’s design consistency.

The challenge is to integrate this new section without cluttering the navigation and to ensure a consistent design and maintainable code structure across both the "Partners" and "Developers" sections.

Proposed Solution

Navigation Update:
- Merge "Partners" and "Developers" under a single "Experts" navigation item.
Reusable Components:
- Propose new reusable components that introduce wrappers and shared CSS and logic for both "Partners" and "Developers" sections.
- Refactor the "Partners" section by extracting reusable code without changing the existing UI/UX.
Developers Pages:
- Create a new /developers page to list all Vue-certified developers.
- Develop individual developer detail pages under /developers/{developerSlug}.
Partners Page Enhancements:
- Add "Proxify" as a new partner.
- Implement a conditional Contact button that either opens an email or redirects to a contact form based on configuration. Expand the Partner interface to support these updates.
Configuration & Utilities:
- Centralize developer data management with new configuration files.
- Add utility functions for UTM tracking and profile image handling.

Additional Information

Additional information about implementation will be added in this file
https://docs.google.com/document/d/1TCQDRCPSBeDQuyH7ENWdIu0Dabu4KuypTA2VQrzQ0bY/edit

New images are added as dummy placeholders

Added two new SVG logos for the Proxify partner to the project: `proxify.svg` for standard view and `proxify-dark.svg` for dark mode compatibility. These additions ensure proper branding representation across various themes.

Updated the navigation menu by renaming the 'Partners' section to 'Experts' to encompass both 'Partners' and 'Talent'. Now, 'Experts' includes links to both '/partners/' and the newly added '/talents/' page.

Updated the partner type definition to include an optional contactPage field. Modified PartnerPage.vue to conditionally create a mailto link or use the contactPage link if available. Improved the rendering of the description with unique keys for each paragraph.

This commit introduces a talent.json file containing dummy information about developers.

…ents Introduced a new partnerConfig.js file to configure Proxify as a partner.

…pport Introduces a new CardList component in Vue, supporting item shuffling and filtering based on provided props. This component ensures that items are correctly displayed and includes conditional rendering for an optional link to browse all items.

Introduce a new PageHero component to the theme, including slots for title and lead content. The component also comes with responsive styling and color transitions for a polished visual presentation.

Introduces a new Vue component to support searchable lists with filtering functionality. Includes a search input tied to a computed filtered list of items and slots for customizable content and styling.

Introduce PageShowcaseListLayout.vue to streamline the layout for showcasing and featuring content. This component includes sections for hero, spotlight, featured items, and an optional join section, improving the modularity and reusability of the codebase.

Introduce a new CallToActionSection component with props for title, description, link, and linkText. The component includes basic styling and functionality for displaying a call-to-action with a styled button and description.

Replaced custom partner components with reusable layout components to enhance maintainability and consistency. This update includes migrating sections to `PageShowcaseListLayout`, `PageHero`, `CardList`, and `PageSearchableListLayout` components, and removing now redundant styles and logic.

Introduced four new Vue components: TalentCompensations, TalentEducation, TalentExperiences, and TalentProficiencies. These components aim to modularize and display talent-related information, improving the structure and readability of the code.

This commit introduces two new components: TalentHero and TalentJoin. TalentHero showcases certified freelancers and includes links for more information. TalentJoin provides a call-to-action for developers to apply for long-term positions.

Introduce the TalentPageFooter component to display footer content on the Talent Page. The footer contains partner logos, social links, and a contact button, all dynamically populated from the partnerConfig.

Introduced comprehensive interfaces to represent talent profiles, experiences, and compensations in `type.ts`. Also, added a utility function `getProfileImage` in `utils.ts` to generate profile image URLs. This helps in organizing and managing talent-related data more efficiently.

Updated class names and styles for consistency in TalentCompensations.vue. Added titleTag prop in TalentProficiencies.vue to allow dynamic heading tags.

Introduce a new TalentCard component to display talent profiles. Includes hero and non-hero styles, conditional rendering for profile image, and sections for compensation and proficiencies.

Introduce a new talents page with search functionality. Implement TalentAll.vue component to filter talents by name, region, or skill using a user-friendly interface.

Created a dynamic page for talents using `vitepress`, rendering talent-specific data based on URL parameters. Also added corresponding routing paths by mapping talent IDs from a JSON file.

Introduce TalentLoading component and integrate it into the talents index page. Modify button styling in PageShowcaseListLayout.vue to use the "accent-button" class for better consistency across the application.

This new component displays detailed information about a talent profile, including name, location, description, compensation, proficiencies, experiences, and education. It also features responsive design adjustments and links for contacting the talent.

Added a conditional title prop to the TalentProficiencies component in TalentCard.vue to enhance clarity when displayed with a hero. Also, improved the user experience in TalentHero.vue by adding a line break before the 'Apply here' link for better readability.

This update introduces the "highlighted" attribute to specific talent entries in the talent.json file. The attribute is set to true, marking these entries as noteworthy for potential feature use.

Introduced a new `proficiencies` object to the partner configuration. This object includes a `skillsPerCard` property with a value of 5, enhancing the organization and display of partner skills.

Implemented the "show all" button to toggle the visibility of proficiencies when they exceed the partner-configured limit. This involves updating the component logic and adding a new button with relevant styles.

Refactored various CSS selectors to enhance the visual consistency across different components. Added missing text decorations and adjusted padding and font sizes for better readability. Removed redundant styles and improved responsiveness on smaller screens.

Eliminated the redundant divider element and associated CSS. Added a bottom border to the last text section for consistent styling.

Implemented TalentTimezoneFilter component for selecting timezones. Removed redundant timezone selection logic from TalentLoading.vue and optimized its layout accordingly.

borna9II · 2024-08-22T15:30:14Z

.vitepress/theme/components/CallToActionSection.vue

+    title?: string;
+    description?: string;
+    link?: string;
+    linkText?: string;
+    showDivider?: boolean


Are semicolons extra? I've checked other files and there they are omitted.

In general, semicolons are optional thing. Since in most existing files they do not use it, I will remove it from vue props.

borna9II · 2024-08-22T15:31:34Z

.vitepress/theme/components/CardList.vue

+    items: Array<any>;
+    filter?: (item: any) => boolean;
+    cardComponent: any;
+    showLinkToAll?: boolean;
+    shuffleItems?: boolean;
+    browseLinkText?: string;
+    browseLinkUrl?: string;
+    splitBy?: string;
+  }>(),
+  {
+    showLinkToAll: false,
+    shuffleItems: false,
+    splitBy: 'platinum'


Check semicolon and colon consistency

borna9II · 2024-08-22T15:41:12Z

.vitepress/theme/components/CardList.vue

+function shuffleArray(array: Array<any>) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[array[i], array[j]] = [array[j], array[i]]


Is a semicolon at the start needed?

great refactoring of their function!

As for the semicolon as the first character in the line, I could not find what I mentioned to you earlier today, but I found this:

"This function is a standard implementation of the Fisher-Yates (or Knuth) shuffle algorithm. It efficiently shuffles the array in place, ensuring a random distribution of the elements. The semicolon ; before the destructuring assignment ensures that this line is correctly interpreted after the Math.floor expression, which is important in JavaScript where automatic semicolon insertion can cause issues in certain cases."

In general, this project does not have implemented standard for having ; in the end of line. In case we add it in the end of line 49, it may be removed by someone who has rule to remove all ; from end of lines. If that happens, JS will interprete this line as const j = Math.floor(Math.random() * (i + 1))[array[i], array[j]] = [array[j], array[i]] and create bug.
We have 2 options here:

leave it at the end of line const j = Math.floor(Math.random() * (i + 1)); and risk that someone may remove it automatically or with some linter rules.

leave it in the beginning ;[array[i], array[j]] = [array[j], array[i]] and have "strange" code

What do you think, what is more clean?

@29avet1 please change this one to be as mentioned on 1. bullet if it isn't resolved

I chose the safest option - added a comment to not remove the semicolon :D

borna9II · 2024-08-22T15:42:38Z

.vitepress/theme/components/PageShowcaseListLayout.vue

+  spotlightTitle?: string;
+  featuredTitle?: string;
+  browseLinkText?: string;
+  browseLinkUrl?: string;
+}>()


borna9II · 2024-08-23T07:16:15Z

src/developers/components/DeveloperExperiences.vue

+        </div>
+        <div v-if="experience.description" class="developer-experience__description">
+          <template v-for="(desc, index) in experience.description" :key="`desc-${index}`">
+            <p v-if="desc.type === 'p'">{{ desc.content }}</p>


Isn't better that desc.type is desc.isParagraph (bool vs string)?

Updated based on change in type.ts file

borna9II · 2024-08-23T07:21:31Z

src/developers/components/type.ts

+  type: 'p';
+  content: string;
+}
+
+export interface UnorderedListDescription {
+  type: 'ul';
+  content: string[];


It would be better that instead of type string, we have a bool as it used only for boolean operation

I like idea, but I will use something more generic. I think "isGrouped" is more generic not indicating which html element we will use, but if it is something that has items or something that is singe item.

borna9II · 2024-08-23T07:23:19Z

src/developers/partnerConfig.js

+  partnerName: partner?.name,
+  logo: partner?.logo,
+  flipLogo: partner?.flipLogo || false,
+
+  // Partner website
+  websiteUrl: websiteUrl,
+  hireUsButtonUrl: hireUrl,
+
+  // Hero Section
+  pageHeroBanner: {
+    title: 'Vue Developers',
+    description: 'Vue Developers are certified individual freelancers. Payments, compliance and vetting are administrated by our partner Proxify. Interested to join the list?',
+    applyButton: {
+      url: applyUrl,
+      label: 'Apply here'
+    }
+  },


The use of commas should be consistent in all files

Checked, it seems correct for JS file.

dionvogliqi · 2024-08-23T08:00:09Z

src/partners/components/PartnerHero.vue

-    <p class="lead">
+  <PageHero>
+    <template #title>{{ title || 'Vue Partners' }}</template>
+    <template #lead>


I see we got rid of title and lead classes, but styles are written for those classes.
Could this break anything on their side?

I actually moved their code in reusable PageHero component. Since style was scoped for this file, it was enough to move same style to reusable component and it would work. Classes in reusable components are renamed, but they match template.
I also tested this page and it is pixel perfect to what they had for Partners Hero.

dionvogliqi · 2024-08-23T08:02:56Z

src/partners/components/PartnerPage.vue

@@ -32,16 +33,17 @@ function genMailLink(email: string) {

    <div class="description">
      <h2>About {{ name }}</h2>
-      <p v-for="desc in description" v-html="desc"></p>
+      <p v-for="desc in description" :key="desc" v-html="desc"></p>


Can we have index as key for this item? I'm not sure about what description contains, but could it be that it has duplicate values?

I actually just added something to have key here since they did not have it, but I agree with you. It makes more sense to use index.

This change updates the DeveloperCard component styles by eliminating the border to ensure a cleaner appearance. The modification is minimal but improves the overall design consistency.

Corrected the spacing inconsistency in the compensations section for monthly salaries. This improves the readability and consistency of the JSON data.

Deleted unused hover styles for dark mode elements from multiple components. This cleanup reduces CSS redundancy and enhances maintainability.

Refactored the JSON schema and component logic to use 'isGrouped' property instead of 'type' for experience descriptions. This simplifies the handling of grouped and ungrouped content and improves the overall code readability.

This commit removes unnecessary semicolons from several Vue component files to align with the existing coding style. Additionally, it ensures the codebase has a consistent appearance and improves readability.

Changed the key for the description list items from the description value to their index. This prevents potential issues with duplicate keys and improves the rendering stability.

Updated the developer profile image to one with the correct aspect ratio. This ensures the profile image displays properly across all devices.

Updated the hero image to use a new version with better resolution. This change is intended to improve the visual appeal and clarity of the homepage. Updated file paths and references accordingly.

Removing obvious skills such as git and JIRA. Rearranging the proficiencies in order of importance, making sure the top five most relevant skills are shown in the top.

get dev images optimized from cloudinary

Feat/dev titles

borna9II · 2024-08-28T15:11:20Z

.gitignore

@@ -3,6 +3,7 @@
 .DS_Store
 .AppleDouble
 .LSOverride
+.idea


I'd like to keep it, as this is a folder made by JetBrains IDE and it is better to always ignore it

borna9II · 2024-08-28T15:15:22Z

src/developers/components/CloudinaryImage.vue

+  src: string,
+  alt: string,
+  width: number,
+  height: number,
+  quality?: string,
+  crop?: string,
+  faceRecognition?: boolean,
+  loading?: 'lazy' | 'eager',
+  className?: string,


remove commas

please review all other places where we have added them

borna9II · 2024-08-28T15:25:39Z

src/developers/components/CloudinaryImage.vue

+    .join(',');
+
+  return `${cloudinaryUrl}/${attributes}/v1/${props.src.replace(/^\/+/, '')}`;


remove commas?

borna9II · 2024-08-28T15:28:25Z

src/developers/components/CloudinaryImage.vue

Move the file to .vitepress/theme/component folder

I'm not sure if we have to move it to global components, at the moment it is used only for developer images.

borna9II · 2024-08-28T15:30:23Z

src/developers/components/DeveloperLanding.vue

+
+

2 extra spaces

TamaraZoric added 30 commits August 13, 2024 23:14

feat: Add Talent profile dummy images

b300c6b

New images are added as dummy placeholders

Add Proxify partner SVG logos

f16c533

Added two new SVG logos for the Proxify partner to the project: `proxify.svg` for standard view and `proxify-dark.svg` for dark mode compatibility. These additions ensure proper branding representation across various themes.

feat: Rename 'Partners' to 'Experts' and add 'Talent' item

6ce42a6

Updated the navigation menu by renaming the 'Partners' section to 'Experts' to encompass both 'Partners' and 'Talent'. Now, 'Experts' includes links to both '/partners/' and the newly added '/talents/' page.

feat: Add initial data about Proxify to partners.json

b6bbcb0

feat: Add initial dummy talent profiles to talent.json

ec44a16

This commit introduces a talent.json file containing dummy information about developers.

feat: Add partner configuration file for Proxify integration with Tal…

d4cd662

…ents Introduced a new partnerConfig.js file to configure Proxify as a partner.

feat: Add PageHero reusable component

38b7ddd

Introduce a new PageHero component to the theme, including slots for title and lead content. The component also comes with responsive styling and color transitions for a polished visual presentation.

feat: Add reusable PageSearchableListLayout component

50e969e

Introduces a new Vue component to support searchable lists with filtering functionality. Includes a search input tied to a computed filtered list of items and slots for customizable content and styling.

feat: Add reusable CallToActionSection component

86a33b0

Introduce a new CallToActionSection component with props for title, description, link, and linkText. The component includes basic styling and functionality for displaying a call-to-action with a styled button and description.

feat: Add TalentPageFooter.vue component

223791f

Introduce the TalentPageFooter component to display footer content on the Talent Page. The footer contains partner logos, social links, and a contact button, all dynamically populated from the partnerConfig.

refactor: Refactor compensation and proficiency Talent components

36df14a

Updated class names and styles for consistency in TalentCompensations.vue. Added titleTag prop in TalentProficiencies.vue to allow dynamic heading tags.

feat: Add TalentCard.vue component

c775dbf

Introduce a new TalentCard component to display talent profiles. Includes hero and non-hero styles, conditional rendering for profile image, and sections for compensation and proficiencies.

feat: Add searchable Talents page

f7b83f4

Introduce a new talents page with search functionality. Implement TalentAll.vue component to filter talents by name, region, or skill using a user-friendly interface.

faat: Add dynamic talent page with routing paths

dbd1937

Created a dynamic page for talents using `vitepress`, rendering talent-specific data based on URL parameters. Also added corresponding routing paths by mapping talent IDs from a JSON file.

feat: Add talent loading components

9bb9642

Introduce TalentLoading component and integrate it into the talents index page. Modify button styling in PageShowcaseListLayout.vue to use the "accent-button" class for better consistency across the application.

feat: Add TalentPage component

bdfefcd

This new component displays detailed information about a talent profile, including name, location, description, compensation, proficiencies, experiences, and education. It also features responsive design adjustments and links for contacting the talent.

feat: Add "highlighted" attribute to talent entries

a85d786

This update introduces the "highlighted" attribute to specific talent entries in the talent.json file. The attribute is set to true, marking these entries as noteworthy for potential feature use.

feat: Add proficiency section to partner config for talent page

769de4e

Introduced a new `proficiencies` object to the partner configuration. This object includes a `skillsPerCard` property with a value of 5, enhancing the organization and display of partner skills.

feat: Add show all/less button to Talent Proficiencies

2a4aedd

Implemented the "show all" button to toggle the visibility of proficiencies when they exceed the partner-configured limit. This involves updating the component logic and adding a new button with relevant styles.

feat: Remove unused divider and update section borders in talent page

1a9f1a3

Eliminated the redundant divider element and associated CSS. Added a bottom border to the last text section for consistent styling.

feat: Add TalentTimezoneFilter component

3e33f89

Implemented TalentTimezoneFilter component for selecting timezones. Removed redundant timezone selection logic from TalentLoading.vue and optimized its layout accordingly.

borna9II requested changes Aug 23, 2024

View reviewed changes

dionvogliqi reviewed Aug 23, 2024

View reviewed changes

TamaraZoric added 6 commits August 23, 2024 10:12

feat: Remove border from DeveloperCard component

43c3f15

This change updates the DeveloperCard component styles by eliminating the border to ensure a cleaner appearance. The modification is minimal but improves the overall design consistency.

feat: Fix formatting issue in developers.json

327b14b

Corrected the spacing inconsistency in the compensations section for monthly salaries. This improves the readability and consistency of the JSON data.

feat: Remove redundant dark mode hover styles for developer buttons

e54edd7

Deleted unused hover styles for dark mode elements from multiple components. This cleanup reduces CSS redundancy and enhances maintainability.

refactor: Remove unnecessary semicolons for consistent code style

536aea2

This commit removes unnecessary semicolons from several Vue component files to align with the existing coding style. Additionally, it ensures the codebase has a consistent appearance and improves readability.

feat: Update key for description list in PartnerPage.vue

81f65e4

Changed the key for the description list items from the description value to their index. This prevents potential issues with duplicate keys and improves the rendering stability.

TamaraZoric requested review from borna9II and dionvogliqi August 23, 2024 12:01

TamaraZoric and others added 16 commits August 23, 2024 14:10

feat: Replace developer 5328 profile image

743be73

Updated the developer profile image to one with the correct aspect ratio. This ensures the profile image displays properly across all devices.

feat: Replace proxify hero image

7dbb38c

Updated the hero image to use a new version with better resolution. This change is intended to improve the visual appeal and clarity of the homepage. Updated file paths and references accordingly.

feat: Clean list of skills of developers

5a0cadf

Removing obvious skills such as git and JIRA. Rearranging the proficiencies in order of importance, making sure the top five most relevant skills are shown in the top.

get dev images optimized from cloudinary

e8ef470

Merge pull request #2 from proxify-ab/feat/dev-img-optimizations

372bdf2

get dev images optimized from cloudinary

update svg scores

97cb682

update dev experience periods

10aa7fb

add website hostname to hire form query params

4fee836

remove hostname form hire form url

8413a66

Merge branch 'main' into feat/add-new-talent-page

c109222

fix cloudinary default props

2b5edf3

add developer titles

95ef911

update devs to be taken by slug, remove unnecessary computed variables

a7dd0ff

move cloudinary URL to partnerConfig

d0ef8cc

Merge pull request #3 from proxify-ab/feat/dev-titles

29e5c85

Feat/dev titles

comment to keep semicolon

b3e3777

29avet1 self-requested a review August 27, 2024 10:53

maxleroy merged commit 9fcaa30 into main Aug 28, 2024

borna9II reviewed Aug 28, 2024

View reviewed changes

29avet1 deleted the feat/add-new-talent-page branch September 3, 2024 15:35

		.join(',');

		return `${cloudinaryUrl}/${attributes}/v1/${props.src.replace(/^\/+/, '')}`;

feat: New developer page #1

feat: New developer page #1

Uh oh!

Conversation

TamaraZoric commented Aug 20, 2024

Description of Problem

Proposed Solution

Additional Information

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

29avet1 Aug 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

29avet1 Aug 27, 2024 •

edited

Loading